<template>
  <div ref="chart" style="width: 80.2083vw; height: 27vw;"></div>
</template>

<script>

export default {
  mounted () {
    // this.renderChart()
  },
  props: {
    echartsData: {
      type: Object,
      require: true
    }
  },
  watch: {
    echartsData: {
      handler (newValue, oldValue) {
        // 当 echartsData 变化时调用 renderChart 方法
        if (Object.keys(newValue).length !== 0) {
          this.renderChart()
        }
      },
      // 是否立即执行一次 handler
      immediate: true,
      // 是否深度监听对象内部值的变化
      deep: true
    }
  },
  methods: {
    renderChart () {
      // const colors = ['#3b7dfd', '#30ce99', '#a9bcdf', '#7f64ff']
      const option = {
        // color: colors,
        // title: {
        //   text: '水质检测'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: []
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.echartsData.categories,
            min: 'auto',
            max: 'auto'

          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.echartsData.series.map(item => ({
          name: item.name,
          type: 'line',
          // stack: 'Total',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            opacity: 0.2,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3b7dfd'
              },
              {
                offset: 1,
                color: '#fff'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        }))

      }

      const chart = this.$echarts.init(this.$refs.chart)
      chart.setOption(option, true)
    }
  }
}
</script>

<style>
/* 可自定义样式 */
</style>
